I hope someone can answer my question, it is probably easy for you but I am not very used to JavaScript.
So I made a menu using this code:
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById(new_tab).className = 'active';
}
When clicking on the area of tab_1 the content_1 is displayed and so on. But I would like to get the content displayed when the mouse hovers over the area of the different tabs. Could you please help me, I looked up the web but I could not find anything, maybe because I have actually no idea of JavaScript.
So, thanks for your time and help.
shreesh chandra shukla
19-Aug-2013You could go for the onmouseover event, as it is supported for a and li tags as well, and additionally check out the onmouseout (very similar) to be aware of both.
With this, the li tags for the menu elements would look like:
<li onmouseover="tabSwitch('tab_1', 'content_1');"><a href="#" id="tab_1" class="active"><img src="img/flash.png" /></a></li><li onmouseover="tabSwitch('tab_2', 'content_2');"><a href="#" id="tab_2"><img src="img/brush.png" /></a></li>
Onmouseover will fire, when you hover over the element. I think you get the idea from here.